<template>
  <div class="page-user">
    <el-form inline>
      <el-form-item label="账号">
        <el-input v-model="query.username" />
      </el-form-item>
      <el-form-item>
        <el-button @click="getList">查询</el-button>
      </el-form-item>
    </el-form>

    <el-space direction="vertical" fill style="width: 100%">
      <el-table :data="state.list">
        <el-table-column label="用户名" prop="nickname"></el-table-column>
        <el-table-column label="头像" prop="avatar">
          <template #default="{ row }">
            <img class="avatar" :src="row.avatar" alt="" />
          </template>
        </el-table-column>
        <el-table-column label="账号" prop="username"></el-table-column>
        <el-table-column label="手机号" prop="phone"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="性别" prop="gender">
          <template #default="{ row }">
            <el-tag :type="getTagType(row.gender)">{{ formatGender(row.gender) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否管理员" prop="isAdmin">
          <template #default="{ row }">
            <el-tag :type="row.isAdmin ? 'success' : 'info'">{{
              row.isAdmin ? '是' : '否'
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="个人介绍" prop="remark">
          <template #default="{ row }">
            <div class="remark">{{ row.remark }}</div>
          </template>
        </el-table-column>
        <el-table-column
          width="200"
          label="创建时间"
          prop="createdAt"
          :formatter="(row) => dayjs(row.createdAt).format('YYYY-MM-DD HH:mm:ss')"
        >
        </el-table-column>
        <!-- <el-table-column label="创建时间" prop="createdAt">
        <template #default="{ row }">
          <div>{{ dayjs(row.createdAt).format('YYYY-MM-DD HH:mm:ss') }}</div>
        </template>
      </el-table-column> -->
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button @click="openPDialog(row)">菜单权限</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="query.pageSize"
        :total="state.rowTotal"
        @current-change="handleCurrentChange"
        style="display: flex; justify-content: flex-end"
      />
    </el-space>

    <!-- 菜单权限分配Dialog -->
    <PermissionDialog ref="pDialog" @ok="getList" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import dayjs from 'dayjs'
import { getUserList, type IUserInfo } from '@/api/user'
import PermissionDialog from './dialogs/permission-dialog.vue'

const query = reactive({
  username: '', // 搜索的账号
  page: 1, // 当前页码
  pageSize: 5 // 每页显示的条数
})

const state = reactive({
  rowTotal: 1, // 总条数
  list: [] as IUserInfo[] // 用户的列表数据
})

/**
 * 获取数据
 */
function getList() {
  getUserList(query).then((resp) => {
    state.rowTotal = resp.data.rowTotal
    state.list = resp.data.rows
  })
}

/**
 * 格式化显示性别
 */
function formatGender(gender: number) {
  switch (gender) {
    case 1:
      return '男'
    case 2:
      return '女'
    default:
      return '未知'
  }
}

function getTagType(gender: number) {
  switch (gender) {
    case 1:
      return 'success'
    case 2:
      return 'danger'
    default:
      return 'info'
  }
}

/**
 * 处理分页器，当前页码修改
 */
function handleCurrentChange(page: number) {
  console.log('handleCurrentChange', page)
  // 修改 query.page
  query.page = page
  // 调用 getList
  getList()
}

onMounted(() => {
  // 默认执行一次 getList
  getList()
})

// 作为 PermissionDialog 的实例
const pDialog = ref()
function openPDialog(row: any) {
  pDialog.value.open(row)
}
</script>

<style lang="scss" scoped>
.avatar {
  width: 50px;
}
.remark {
  height: 36px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
